<template>
  <div class="app-container calendar-list-container">
    <!-- filter 条件查询 -->
    <div class="filter-container">
      <el-form :inline="true"   ref="ruleForm1">
        <div class="demo-input-suffix">
          <el-form-item :label="$t('employee.Staff_ID')">
            <el-input clearable @keyup.enter.native="handleFilter" 
            v-model="listQuery.staffId" 
            style="width: 200px;margin-right:15px;" class="filter-item" :placeholder="$t('employee.Pllease_enter_staff_ID')" >
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('employee.Staff_surname')">
            <el-input clearable @keyup.enter.native="handleFilter" v-model="listQuery.surname" style="width: 200px;margin-right:15px;" class="filter-item" :placeholder="$t('employee.Pllease_enter_staff_surname')">
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('employee.Contact_number')">
            <el-input clearable @keyup.enter.native="handleFilter" v-model="listQuery.staffPhone" style="width: 200px;margin-right:15px;" class="filter-item" :placeholder="$t('employee.Pllease_enter_contact_number')">
            </el-input>
          </el-form-item>  
        </div>
        <div class="demo-input-suffix">
          <el-form-item label="abn">
            <el-input clearable @keyup.enter.native="handleFilter" v-model="listQuery.abn" style="width: 200px;margin-right:15px;" class="filter-item"  placeholder="abn">
            </el-input>
          </el-form-item>  
         <el-form-item :label="$t('employee.Address')">
            <el-input clearable @keyup.enter.native="handleFilter" v-model="listQuery.staffAddress" style="width: 200px;margin-right:15px;" class="filter-item"  :placeholder="$t('employee.Pllease_enter_residential_address')">
            </el-input>  
         </el-form-item> 
          <el-button class="filter-item" type="primary" v-waves  @click="handleFilter"  icon="el-icon-search">{{$t('common.Search')}}</el-button>
          <el-button class="filter-item" v-waves type="primary"  @click="dialog.add=true,roleIds=''" icon="el-icon-plus">{{$t('common.Add')}}</el-button>
          <el-button class="filter-item" type="primary" v-waves  @click="handleDownload" icon="el-icon-download">{{$t('common.Export')}}</el-button>
        </div> 
      </el-form>
    </div>
    <!-- table 表格 -->
    <el-table  :data="list" v-loading="loading.list" element-loading-text="给我一点时间" border fit highlight-current-row
      style="width: 100%">
      <el-table-column  :label="$t('table.sort')" prop='index' />
      <el-table-column  :label="$t('employee.Staff_ID')" prop='staffId' />
      <el-table-column  :label="$t('employee.Staff_surname')" prop='surname' />
      <el-table-column  :label="$t('employee.Name')" prop='name' />
      <el-table-column  :label="$t('employee.Contact_number')" prop="staffPhone"></el-table-column>
      <el-table-column  label="abn" prop='abn' />
      <el-table-column  :label="$t('employee.Address')" prop='staffAddress' />
      <el-table-column  :label="$t('table.Operate')"  class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <!-- <el-button  size="mini" type='primary' v-if="scope.row.isFlag == 2" @click="changeStatus(scope.row.agentId,1)">启用
          </el-button> -->
          <el-button  type="primary"  @click="update(scope.row)">{{$t('table.Modify')}}
          </el-button>   
          <el-button  type="danger"  @click="deleteStaffById(scope.row.staffId)">{{$t('table.Delete')}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination 
      background 
      @size-change="handleSizeChange" 
      @current-change="handleCurrentChange" 
      :current-page="listQuery.pageNo" 
      :page-sizes="[10, 20, 30, 40]" 
      :page-size="listQuery.pageSize" 
      layout="total, sizes, prev, pager, next, jumper" 
      :total="total">
      </el-pagination>
    </div>
    <!-- 添加弹框 -->
    <el-dialog :title="$t('employee.Add_Staff')" :visible.sync="dialog.add">
      <el-form :model="bindQuery" :rules='bindRules' ref="bindForm" label-position="right" label-width="150px"> 
        <el-form-item :label="$t('employee.Staff_surname')" prop="surname">
         <el-input  clearable v-model="bindQuery.surname" :placeholder="$t('employee.Staff_surname')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('employee.Name')" prop='name'>
          <el-input  clearable v-model="bindQuery.name" :placeholder="$t('employee.Name')"></el-input>
        </el-form-item >
        <el-form-item :label="$t('employee.Contact_number')" prop='staffPhone'>
          <el-input  clearable v-model="bindQuery.staffPhone"  :placeholder="$t('employee.Contact_number')"></el-input>
        </el-form-item>
          <el-form-item label="abn" prop='abn'>
          <el-input  clearable v-model="bindQuery.abn"  placeholder="请输入abn"></el-input>
        </el-form-item>
        <el-form-item :label="$t('employee.Address')" prop='staffAddress'>
          <el-input  clearable v-model="bindQuery.staffAddress" :placeholder="$t('employee.Address')"></el-input>
        </el-form-item>
      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.add = false">{{$t('common.Cancel')}}</el-button>
        <el-button type="primary" :loading="loading.add" @click="add">{{$t('common.Add')}}</el-button>
      </div>
    </el-dialog>
    <!-- 编辑员工 -->
    <el-dialog :title="$t('employee.Edit_Staff')" :visible.sync="dialog1.add">
      <el-form :model="bindQuery1" :rules='bindRules1' ref="bindForm1" label-position="right" label-width="120px"> 
        <el-form-item :label="$t('employee.Staff_surname')" prop="surname">
         <el-input  clearable v-model="bindQuery1.surname"  placeholder="请输入员工姓氏"></el-input>
        </el-form-item>
        <el-form-item :label="$t('employee.Name')" prop='name'>
          <el-input  clearable v-model="bindQuery1.name" placeholder="请输入员工名"></el-input>
        </el-form-item >
        <el-form-item :label="$t('employee.Contact_number')" prop='staffPhone'>
          <el-input  clearable v-model="bindQuery1.staffPhone" placeholder="请输入手机号码"></el-input>
        </el-form-item>
          <el-form-item label="abn" prop='abn'>
          <el-input  clearable v-model="bindQuery1.abn"  placeholder="请输入abn"></el-input>
        </el-form-item>
        <el-form-item :label="$t('employee.Address')" prop='staffAddress'>
          <el-input  clearable v-model="bindQuery1.staffAddress" placeholder="请输入地址"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog1.add = false">取消</el-button>
        <el-button type="primary" :loading="loading.add" @click="adds">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList, deleteStaffById, addStaff, updateStaffById, exportExcel} from '@/api/employee'
import { validatePhone } from '@/utils/validate'
import {getAddress, getId, getAddressByAreaId} from '@/utils/getAddress'
import pcq from '@/components/index'
export default {
  name: 'user_list',
  data() {
     var validatePass = (rule, value, callback) => {
        if (!validatePhone(value)) {
          return callback(new Error('请填写正确的手机号码'));
        } else {
          callback();
        }
      };
    return {
      total: 0,
      show: false,
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        staffId: '',
        surname:'',
        abn:'',
        staffAddress:'',
        staffPhone: ''
      },
      list: null,
      loading: {
        list: false,
        add: false
      },
      dialog:{
        add:false
      },
      dialog1:{
        add:false
      },
      bindQuery:{
       staffId:'',
       surname:'',
       name:'',
       staffPhone: '',
       abn: '',
       staffAddress: ''
      },
      bindQuery1: {
       staffId:'',
       surname:'',
       name:'',
       staffPhone: '',
       abn: '',
       staffAddress: ''
      },
      bindRules:{
        surname: [
          { required: true, message: this.$t('user.Name'), trigger: 'change' }
        ],
        name: [
          { required: true, message: this.$t('user.Name'), trigger: 'blur' }
        ],
        staffPhone: [
          { required: true, message: this.$t('user.Name'), trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        abn: [
          { required: true, message: this.$t('user.Name'), trigger: 'blur' }
        ],
        staffAddress: [
          { required: true, message: this.$t('user.Name'), trigger: 'blur' }
        ]
      },
       bindRules1:{
        staffPhone: [
          { validator: validatePass, trigger: 'blur' }
        ]
      },
      wxRole: [],
      wxRoles: [],
      roleIds: '',
      arr: [],
      provices: [],
      cities: [],
      areas: [],
    }
  },
  components:{
      pcq
  },
  methods: {
    //导出
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['员工ID', '员工姓氏', '员工名字','	手机号','abn', '员工地址']
        const filterVal = ['staffId', 'surname', 'name','staffPhone','abn', 'staffAddress']
        const data = this.formatJson(filterVal, this.list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.$t('route.Staff_list')
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
      if (j === 'ctime') {
        return parseTime(v[j])
      } else {
        return v[j]
      }
      }))
    },
    //获取员工列表
    async getLists() {
      this.loading.list = true
        const { data } = await getList(this.listQuery)
        this.list = data.records.map((item, index) => ({index: index + 1, ...item}))
        this.total = data.total
        console.log(this.list);
  
      this.loading.list = false     
    },
    //删除员工
    async deleteStaffById(staffId){
       if(!staffId){
         return
       }
       const { data } = await deleteStaffById({staffId})
        this.$message({
              type: 'success',
              message: this.$t('common.Successful_operation')
        });
        this.getLists()
    },

    //新增员工
    add() {
      this.$refs['bindForm'].validate(async (valid) => {
        if (valid) {
          this.loading.add = true
          let a = {...this.bindQuery}
          try{ 
            const { data } = await addStaff(a)
            this.$message({
              type: 'success',
              message: this.$t('common.Successful_operation')
            });
            this.dialog.add = false
            this.loading.add = false
            this.$refs['bindForm'].resetFields()
            this.getLists()
          } catch (error) {
              this.dialog.add = false
              this.loading.add = false
              this.$refs['bindForm'].resetFields() 
            }
        }
      })
    },
     //编辑员工
    adds() {
      this.$refs['bindForm1'].validate(async (valid) => {
        if (valid) {
          this.loading.add = true
          let a = {...this.bindQuery1}
          try{ 
            const { data } = await updateStaffById(a)
            this.$message({
              type: 'success',
              message: this.$t('common.Successful_operation')
            });
            this.dialog1.add = false
            this.getLists()
          } catch (error) {
                    
            }
            this.loading.add = false
        }
      })
    },
    //编辑渲染数据
    update(item) {
      this.dialog1.add = true
      this.bindQuery1.staffId = item.staffId
      this.bindQuery1.surname = item.surname
      this.bindQuery1.name = item.name
      this.bindQuery1.staffPhone = item.staffPhone
      this.bindQuery1.abn = item.abn
      this.bindQuery1.staffAddress = item.staffAddress
       console.log( this.bindQuery1.staffId)
    },
    //查找
    handleFilter() {
      this.listQuery.pageNo = 1
      this.getLists()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getLists()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      this.getLists()
    },
  },
  created() {
    this.getLists()
  },
}
</script>
